<template>
	<view class="page">
		 <!--  -->
		<view class="nav_bar" :style="{height:systemInfoNum +'px',paddingTop:statusBarHeightNum+'px'}">
			<!-- <text>测试</text> -->
			<view class="title">
				<text>测试</text>
				<view class="pic_icon" @click="goBack">
					<image src="/src/static/goBack_icon.png" mode=""></image>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app'
import {ref,reactive} from 'vue'
let systemInfoNum=ref(0)
let statusBarHeightNum=ref(0)
	const goBack=()=>{
		uni.navigateBack()
	}
	onLoad(() => {
		const systemInfo = uni.getSystemInfoSync();
		
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		
		// 状态栏高度（手机顶部状态栏区域的高度）
		
		const statusBarHeight = systemInfo.statusBarHeight;
		
		// 胶囊按钮距离顶部的距离（通常比状态栏高度多一点点，具体以获取到的为准）
		
		const menuButtonTop = menuButtonInfo.top;
		
		// 导航栏高度 = 胶囊按钮高度 + (胶囊按钮上边距 - 状态栏高度) * 2
		
		// 因为胶囊按钮上下有间隙，所以导航栏高度可以这样计算：
		
		const navBarHeight = (menuButtonTop - statusBarHeight) * 2 + menuButtonInfo.height;
		
		// 整个自定义导航栏的高度 = 状态栏高度 + 导航栏高度
		
		systemInfoNum.value = statusBarHeight + navBarHeight;
		statusBarHeightNum.value=statusBarHeight
		console.log('systemInfoNum',systemInfoNum.value);
		console.log('statusBarHeightNum',statusBarHeightNum.value);
	})
</script>

<style lang="scss" scoped>
.nav_bar{
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	
	.title{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		position: relative;
		.pic_icon{
			position: absolute;
			left: 48rpx;
			top: 50%;
			transform: translate(-50%,-50%);
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 96rpx;
			height: 100%;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
	
}
</style>
